<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>新闻列表页</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="${ctx}/jslib/jfye/fenye.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/www/img/bootstrap-3.2.0-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/www/img/bootstrap-3.2.0-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/www/img/css/index.css">
	<script type="text/javascript" src="${ctx}/www/img/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="${ctx}/www/img/bootstrap-3.2.0-dist/js/bootstrap.js"></script>
  
<style>
body{
font-size:14px;
font-family:微软雅黑;
}
li {
    list-style-type: none;
}
a {
    color: #252525;
    text-decoration: none;
}
#content{
width:600px;
margin:0 auto;
}
#news{
}
#news ul li{
height: 27px;
line-height: 27px;
font-size: 14px;
color:c1c1c1;
padding-left: 9px;
}

</style>
  </head>
  
  <body>
	  <div class="content" id="content">
	   	  <div><h1>列表页</h1></div>
		  <div class="news" id="news">
		  	<input id="cid" type="hidden" value="${requestScope.cid}"/>
		  	<ul>
			    <c:forEach items="${requestScope.newslist}" var="news">
			    	<li>
			    		<p><a <c:choose><c:when test="${news.url!=null}">href="${news.url}"</c:when><c:otherwise>href="${ctx}/news/detail?id=${news.id}"</c:otherwise></c:choose> title="${news.title}" target="_blank">${news.title}</a><span style="float:right;"><fmt:formatDate value="${news.pubtime}" pattern="yyyy.MM.dd HH:mm:ss"/></span></p>
			    	</li>
			    </c:forEach>
		    </ul>
		    </div>
		    
		    <div class="fenye">
		    	<ul>
		        	<li id="first">首页</li>
		            <li id="top" onclick="topclick()">上一页</li>
		            <li class="xifenye" id="xifenye">
		            	<a id="xiye">${requestScope.page}</a>/<a id="mo">${requestScope.total}</a>
		                <div class="xab" id="xab" style="display:none">
		                	<ul id="uljia">
		                    	
		                    </ul>
		                </div>
		            </li>
		            <li id="down" onclick="downclick()">下一页</li>
		            <li id="last">末页</li>
		        </ul>
		    
		    </div>
		</div>
	    
  </body>
  	<script type="text/javascript" charset="utf-8" src="${ctx}/jslib/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	//跳转页面
	function topage(num){
		var cid = $("#cid").val();
		window.location.href = '${ctx}/news/list?cid='+cid+'&page='+num; 
	}
	
	//分页的显示与隐藏
	$("#xifenye").click(function(a){
		$("#uljia").empty();
		$("#xab").toggle();
		//显示出的一共多少页
		var uljia=$("#uljia");
		var page=parseInt($("#xiye").html());//获取当前的页数
		var pages=parseInt($("#mo").html());//获取当前的总页数
		for(var i=1;i<=pages;i++)
		{
			var H="<li  onclick='fl("+i+","+pages+")'>"+i+"</li>";//添加一共多少页和点击事件
			
			uljia.append(H);
		}
		scrolltop(page);
	});
	//点击分页显示的方法
	function fl(p1,p2){
			//var p=p1;
			$("#xiye").empty();
			$("#xiye").html(p1);//给显示的页数赋值
			topage(p1);
			}
	//分页的的上一页和下一页
	function topclick(){
		var v=document.getElementById("xiye");
		var num=v.innerHTML;
		if(num>1)
		{
			num--;
			v.innerHTML=num;
			var hei=25*num-25;
			$("#xab").scrollTop(hei);
			topage(num);
		}
		
		
		}
	function downclick(){
		var pages=parseInt($("#mo").html());//获取当前的总页数
		var v=$("#xiye");
		var num=parseInt(v.html());
		if(num < pages){
			num = ++num;
			v.html(num);
			scrolltop(num);
			topage(num);
			}
		}
	//分页的的首页和未页
	$("#first").bind("click",function(){
		var v=document.getElementById("xiye");
		v.innerHTML=1;
		topage(1);
		scrolltop(v.innerHTML);
		});
	$("#last").bind("click",function(){
		var v=document.getElementById("xiye");
		var l=document.getElementById("mo");
		v.innerHTML=l.innerHTML;
		topage(l.innerHTML);
		scrolltop(v.innerHTML);
		});
	//滚动条
	function scrolltop(top){
		var hei=25*top-25;
		$("#xab").scrollTop(hei);
		}
	</script>
</html>
